在 Day 22 中，我們已經完成了一個基礎版的 RAG 後端來達成：

1. 接收使用者輸入的問題
2. 透過 ChromaDB 檢索最相關的 Notion 筆記
3. 由 GPT 生成自然語言回答

但目前這套系統還只能在 Terminal 操作，沒有直觀的 UI 介面。因此，今天要帶各位認識 Streamlit 這個強大的 Python 前端框架，為 RAG 系統建立一個簡單、直覺的網頁介面。

1. 什麼是 Streamlit ?

Streamlit 是一個開源的 Python 框架，讓數據科學家和 ML 工程師能夠用純 Python 快速創建互動式 Web 應用，無需前端開發經驗。

• 核心特點
  • 🚀 極速開發：幾十行代碼就能做出完整應用
  • 🐍 純 Python：不需要 HTML/CSS/JavaScript
  • 🔄 即時預覽：修改代碼自動刷新
  • 📊 原生支援數據視覺化：整合 Matplotlib、Plotly、Altair
  • 🤖 ML/AI 友善：完美搭配 TensorFlow、PyTorch、Scikit-learn
  • 🎨 美觀 UI：內建現代化設計

2. 核心概念

2.1 腳本式運行

Streamlit 採用從上到下執行的模式，每次用戶互動都會重新運行整個腳本。

st.title("我的應用")
name = st.text_input("你的名字")
st.write(f"Hello, {name}!")

2.2 自動重繪

當用戶與任何組件互動時，Streamlit 會自動重新執行腳本並更新畫面。

2.3 Session State

為了在重繪之間保持數據，使用 st.session_state：

if 'count' not in st.session_state:
    st.session_state.count = 0

if st.button('點擊'):
    st.session_state.count += 1

st.write(f"點擊次數: {st.session_state.count}")

2.4 快取機制

使用裝飾器快取昂貴的計算：

@st.cache_data  # 快取數據
def load_data():
    return pd.read_csv('data.csv')

@st.cache_resource  # 快取資源（模型、連線）
def load_model():
    return tf.keras.models.load_model('model.h5')

3. 核心組件

3.1 文字與標題

pythonst.title("主標題")
st.header("標題")
st.subheader("子標題")
st.text("純文字")
st.markdown("**粗體** _斜體_ `代碼`")
st.code("print('Hello')", language="python")
st.latex(r"\sum_{i=1}^n x_i")

3.2 數據顯示

# DataFrame
st.dataframe(df)  # 互動式表格
st.table(df)      # 靜態表格

# JSON
st.json({'name': 'John', 'age': 30})

# Metric 指標
st.metric("溫度", "28°C", "+2°C")

3.3 圖表

# 內建圖表
st.line_chart(data)
st.bar_chart(data)
st.area_chart(data)

# Matplotlib
fig, ax = plt.subplots()
ax.plot(x, y)
st.pyplot(fig)

# Plotly
fig = px.scatter(df, x='x', y='y')
st.plotly_chart(fig)

# Altair
chart = alt.Chart(df).mark_bar().encode(x='x', y='y')
st.altair_chart(chart)

3.4 輸入組件

# 文字輸入
text = st.text_input("輸入文字")
text_area = st.text_area("多行文字")
password = st.text_input("密碼", type="password")

# 數字輸入
number = st.number_input("數字", min_value=0, max_value=100)
slider = st.slider("滑桿", 0, 100, 50)

# 選擇
option = st.selectbox("下拉選單", ['選項1', '選項2', '選項3'])
multi = st.multiselect("多選", ['A', 'B', 'C'])
radio = st.radio("單選", ['是', '否'])

# 日期時間
date = st.date_input("日期")
time = st.time_input("時間")

# 檔案上傳
file = st.file_uploader("上傳檔案", type=['csv', 'txt'])

# 按鈕
if st.button("點擊我"):
    st.write("按鈕被點擊了！")

# Checkbox
if st.checkbox("同意條款"):
    st.write("已同意")

4. 小結與下篇預告

今天我們介紹了 Streamlit 這個前端框架。
透過簡潔的 Python 語法，我們能在短時間內打造一個漂亮又實用的 Web 介面。
這代表著我們的專案，正式從「工具」邁向「產品」的階段。

明天起（Day 24），我們將把今天的概念轉為更進一步的實作，讓這個助理不只會回答，更能理解「你在問什麼」，成為真正的個人化 Knowledge Agent。